<template>
<div>
  <div class="loader-base" v-if="showLoad"><div class="loader-wrap"></div></div>
  <div class="page">
    <scroller lock-x @on-scroll-bottom="onScrollBottom" ref="scrollerBottom" :scroll-bottom-offst="100" v-show="todolist.length>0">
    <div>
      <div class="sta-list-wrap" v-for="item in todolist">
        <div @click="goDateil(item.Guid,item.MentState)">
          <div class="displayflex ctx1">
            <em class="flex1 time">{{item.SDatte}}</em>
            <em class="tag org" v-if="item.MentState=='1'">待确认</em>
            <em class="tag" v-if="item.MentState=='2'">已确认</em>
          </div>
          <div class="displayflex ctx2">
            <em class="flex1 num">共{{item.OrderCount || 0}}单</em>
            <em class="price" v-if="userinfo.UserBizType=='Driver'">￥{{item.SettlePartyAmount | fixed00}}</em>
            <em class="price" v-if="userinfo.UserBizType=='Cargowner' || userinfo.UserBizType=='warehouse'">￥{{(item.SettlePartyAmount) | fixed00}}</em>
          </div>
          <div class="receive" v-if="userinfo.UserBizType=='Cargowner' || userinfo.UserBizType=='warehouse'">
            <div class="displayflex receive-ctx">
              <div class="certify"><em>收款方</em></div>
              <div class="flex1 ctx">
                <p>{{item.ChineseName}}</p>
                <p>{{item.Bank}}</p>
                <p>{{item.BankAccount}}</p>
              </div>
            </div>
          </div>
        </div>
        <div class="list-btn w72">
          <div class="btn btn-sm-gray" @click="goDateil(item.Guid,item.MentState)">查看详情</div>
          <div class="btn btn-sm" @click="gobtn(item.Guid)" v-if="item.MentState=='1'">确认</div>
        </div>
      </div>
      <!-- <div class="list-warp" v-for="item in todolist" @click="goDateil(item.Guid,item.MentState)">
        <div class="list-ctx">
          <div class="head displayflex ft14">
            <p class="lft ft16">账期：{{item.SDatte}}</p>
            <span class="flex1 txt-rit" v-if="item.MentState=='1'">未确认</span>
            <span class="flex1 txt-rit" v-if="item.MentState=='2'">已确认</span>
          </div>
          <div class="grab-wrap">
            <div><span>结算单位：</span>{{item.SettlePartyName}}</div>
            <div><span>客户名称：</span>{{item.Receiver}}</div>
            <div class="statis ft14 displayflex">
              <span>订单量：{{item.OrderCount}}</span> 
              <div class="flex1 txt-rit" 
                v-if="userinfo.UserBizType=='Cargowner' || userinfo.UserBizType=='warehouse'">运费<em class="org">￥</em><span class="price org ft16">{{item.CarrierAmount || 0}}</span></div>
              <div class="flex1 txt-rit" v-if="userinfo.UserBizType=='Driver'">结算费用：<em class="org">￥</em><span class="price org ft16">{{item.DistributionIncome || 0}}</span></div>
            </div>
            <template v-if="userinfo.UserBizType=='Cargowner' || userinfo.UserBizType=='warehouse'">
              <div class="ft14">保险费：<span class="org">￥{{item.InsuranceFee}}</span></div>
              <div class="ft14">结算费用：<span class="org">￥{{item.CarrierAmount+item.InsuranceFee || 0}}</span></div>
            </template>
          </div>
        </div>
        <div class="list-btn" v-if="item.MentState=='1'">
          <div class="btn btn-sm" @click="gobtn(item.Guid)">确认对账单</div>
        </div>
      </div> -->
      <p class="txt-bottom" v-if="totalLength == todolist.length && totalLength>3"><em class="txt">我是有底线的</em></p>
    </div>
    </scroller>
    <div class="noDate_page" v-if="todolist.length<=0">
      <div class="noDate_icon"><i class="iconfont icon-null"></i></div>
      未找到相关数据
    </div>
  </div>
</div>
</template>

<script>
export default {
  data() {
    return {
      todolist: [],
      totalLength: 0,
      showLoad: false,
      count: 0,
      pageindex: 1
    };
  },
  created() {
    this.getData();
  },
  computed: {
    userinfo() {
      if (localStorage.UserInfo) {
        return JSON.parse(localStorage.UserInfo);
      }
    }
  },
  watch: {},
  methods: {
    onScrollBottom() {
      this.count++;
      if (this.count == 1) {
        this.getData();
        this.$nextTick(() => {
          this.$refs.scrollerBottom.reset();
        });
      }
    },
    goDateil(guid, state) {
      this.$router.push({
        path: "/user/statementDetail",
        query: { guid: guid ,state:state}
      });
    },
    getData() {
      if (
        this.totalLength == this.todolist.length &&
        this.todolist.length > 0
      ) {
        return false;
      }
      var self = this;
      self.showLoad = true;
      var query = {
        SettlePartyType: this.userinfo.UserBizType=='Driver'?"2":"1",
        ReceiverGUId: this.userinfo.UserBizType=='Driver'?this.userinfo.StaffID:this.userinfo.CorpGuid,
        PageSize: 10,
        PageIndex: this.pageindex
      };
      this.Ajax.post("GetTrtplstatement", query).then(function(resp) {
        self.showLoad = false;
        if (resp.IsSuccess) {
          var result = resp.Datas;
          if (result.length > 0) {
            self.todolist = self.todolist.concat(result);
            self.pageindex++;
            self.count = 0;
          }
          self.totalLength = resp.TotalRecords;
          if (self.pageindex == 2) {
            self.$nextTick(() => {
              if (self.$refs.scrollerBottom.scrollBottomOffset > 0) {
                self.$refs.scrollerBottom.reset({
                  top: 0
                });
              }
            });
          }
        }
      });
    },
    gobtn(guid) {
      var self = this;
      this.$vux.confirm.show({
        title: "提示",
        content: "是否确认对账单？",
        onConfirm() {
          var query = {
            Guid: guid
          };
          self.showLoad = true;
          self.Ajax.post("CheckTrtplstatement", query).then(function(resp) {
            self.showLoad = false;
            if (resp.IsSuccess) {
              self.$vux.toast.show({
                type: "text", //success, warn, cancel, text
                text: "已确认",
                onHide() {
                  self.pageindex = 1;
                  self.todolist = [];
                  self.getData();
                }
              });
            } else {
              self.$vux.toast.show({
                type: "text", //success, warn, cancel, text
                text: resp.ErrorMessage
              });
            }
          });
        }
      });
    }
  }
};
</script>